<template>
	<view class="haoy">
		<u-navbar :border-bottom="false" title-size="35" title="群列表">
			<view slot="left">left</view>
			<view slot="right" class="right-icon" @click="goHaoy">
				<image src="@/static/IM/tianj.png"></image>
			</view>
		</u-navbar>
		<view class="haoy-search">
			<u-search placeholder="输入名称" v-model="keyword" :show-action="false" shape="square" bg-color="#F6F6F6"
				@search="searEv"></u-search>
		</view>
		<ul>
			<li v-for="(item,index) in list" :key="index" @click="handleRoute(item.groupID)">
				<view class="cont">
					<image src="/static/static/assets/gruopavatar.svg" v-if="item.avatar==''"></image>
					<image :src="item.avatar" v-else></image>
					<view>
						<text>{{item.name}}</text>
						<text>ID：{{item.groupID}}</text>
					</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索列表
				keyword: '',
				list: [],
				// 弹框
				show: false,
				to1: '',
				is_show:false,
				item:{},//要删除的好友数据
				content: '是否要删除该好友'
			};
		},
		onLoad() {
			this.haoyList()
		},
		methods: {
			searEv() {
				if(this.keyword==''){
					this.haoyList()
				}else{
					this.list = this.list.filter(item => item.name == this.keyword)
				}
			},
			goHaoy() {
				this.show = !this.show
			},
			haoyList() {
				uni.$TUIKit.getGroupList().then(imResponse => {
					this.setData({
						list: imResponse.data.groupList
					})
					console.log(imResponse.data.groupList, '好友列表')
				});
			},
			handleRoute(idre) {
				let id = 'GROUP' + idre;
				const url = `/pages/subpackage/IM/TUI-Chat/chat?conversationID=${id}`;
				uni.navigateTo({
					url
				});
				
			},
		}
	}
</script>

<style lang="scss">
	.haoy {
		background-color: #f3f3f3;

		.right-icon {
			>image {
				width: 40rpx !important;
				height: 40rpx !important;
				margin-right: 30rpx;
			}
		}

		.haoy-search {
			padding: 0 30rpx 10rpx 30rpx;
			background-color: #fff;
		}

		>ul {
			margin-top: 20rpx;

			>li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-bottom: 1rpx solid #f3f3f3;

				.cont {
					display: flex;
					align-items: center;
					>image {
						width: 82rpx;
						height: 82rpx;
						margin-right: 20rpx;
					}

					>view {
						>text {
							display: block;
						}
					}
				}

				.del {
					margin-right: 0;
				}
			}

			>li:last-child {
				border: none
			}
		}

		.pop {
			padding: 20rpx;
			box-sizing: border-box;

			.pop-title {
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Medium;
			}

			.pop-input {
				display: flex;
				align-items: center;
				margin: 120rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E5E5E5;

				>input {
					width: 600rpx;
					padding: 10rpx;
				}
			}

			.pop-btn {
				margin: 0 auto;
				width: 320rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				color: #ffffff;
				background: linear-gradient(to right, #B07412, #E3BA5B);
				border-radius: 15rpx;
			}

			.pop-btn:active {
				background: linear-gradient(to right, #E3BA5B, #B07412);
			}
		}
	}
</style>